<template>
  <div style="height:100%;width:100%;position: absolute;top: 5px">
    <div  class="newLyIncomBar" style="height:100%;width:100%;" id="newLyIncomBar"></div>
  </div>
</template>
 <script>
export default {
  name: "newLyIncomBar",
  data(){
    return{
      show:true,
      myChart:null
    }
  },
  props: {
    newLyIncomBarData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    newLyIncomBarData(val){
    var maxData = Math.max.apply(null, val.yAxis);
    var minData = Math.min.apply(null, val.yAxis);
      this.getPie(val,maxData,minData);
    }
  },
  mounted() {
    var maxData = Math.max.apply(null, this.newLyIncomBarData.yAxis);
    var minData = Math.min.apply(null, this.newLyIncomBarData.yAxis);
    this.getPie(this.newLyIncomBarData,maxData,minData);
  },
  methods: {
   genData(val) {
      var datalsit = [];
      val.yAxis && val.yAxis.map((item, index) => {
        let obj = {};
        var label = {color:''};
        obj['value'] = item
        if (item < 0) {
          if(item !=  Math.max.apply(null, val.yAxis)){
            label = {
               show: true,
               position: 'bottom',
               color: '#f48892'
             };
          }else{
            label = {
               show: true,
               position: 'bottom',
               color: '#f48892'
             };
          }
          var itemStyle={
            barBorderRadius:[0, 0, 10, 10],
            color:'#f48892'
          }
          obj['label'] = label
          obj['itemStyle'] = itemStyle
        } else {
          if(item !=  Math.max.apply(null, val.yAxis)){
            label = {
               show: true,
               position: 'top',
               color: '#9399b6'
             };
          }else{
            label = {
               show: true,
               position: 'top',
               color: '#9399b6'
             };
          }
          var itemStyle={
            barBorderRadius:[10, 10, 0, 0],
          }
          obj['label'] = label
          obj['itemStyle'] = itemStyle
        }
        datalsit.push(obj)
      });
      return datalsit
    },
    getPie(val,maxData,minData) {
      var datalsit = this.genData(val)
      let absValMax = Math.abs(minData) > Math.abs(maxData) ? Math.abs(minData) : Math.abs(maxData)
      absValMax = Math.ceil(absValMax/10*1.2)*10
      const that = this;
      this.myChart = this.$echarts.init(document.querySelector(".newLyIncomBar"));
      let option = {
          tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                },
               formatter: '{c0}万户'
              },
         grid: {
           top:'50px',
           left: "50px",
           right: "30px",
           bottom:'80px',
          },
           legend: {
                  data: [val.titleNetName],
                  right : '80',
                  top:'15',
                  textStyle: { color: "#000" },
              },
         xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            interval:0,
            rotate:40 ,
            },
         data:val.xAxis,
          axisLine:{
            show:true,
            lineStyle:{
              color:'#9399b6',
            },
          }
          },
        yAxis: [
          {
              type: 'value',
              // min: (minData-(minData+maxData1)%2)*2.2,
              min:-Math.ceil(absValMax),
              max:Math.ceil(absValMax),
              splitLine:{show: true,
              lineStyle:{
                  type: 'dashed'
              }},  //去除网格线
              axisLabel: {
                  show:true,
              },
              splitArea:{
                  show:true,
                  areaStyle:{
                      color:'#fff'
                  },
              },
              axisTick:{ //y轴刻度线
                  show:false
              },
              axisLine:{ //y轴
                  show:true,
                  lineStyle:{
                    color:'#9399b6',
                  },
              },
          },
            ],
        dataZoom: [
          {
            show: true,
            type :'slider',
            // start:0,
            // end: 20,
            startValue:val.xAxis.length - 12 ,
            endValue: val.xAxis.length - 1,
            backgroundColor:'#EBEDF3',
            showDataShadow:false,
            borderRadius:[20,20],
            fillerColor:'#BEC5D8',
            height:13,
            width:300,
            left:'30%',
            bottom:10,
          }
        ],
        series: [
          {
              type: "bar",
              name: val.titleNetName,
              data: datalsit,
              barWidth :20,
              itemStyle:{
                 color: '#7f92f7',
              //    normal:{
              //      color: function(params) {
              //         var c="";
              //         if(params.data.value == maxData){
              //           c='#7ed093'
              //         }else{
              //           c='#7f92f7'
              //         }
              //          return c;
              //          },
              // }
          },
            },
      ],
      };
      this.myChart.setOption(option);

    }
  },
};
 </script>

 <style scoped lang="scss">
 </style>
